<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转相册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        body{
            width: 100%;
            height: 100%;
              /* 视距 */
            perspective: 1200px;
            background-color: black;
            /* background: url(../Picture/背景桌面.jpg);
            background-size: 100%; */
        }

        #wrap,#wrap2{
            width: 133px;
            height: 200px;
            border: 1px solid black;
            position: relative;
        }
        #wrap{

            margin: 90px auto;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(0deg) scale3d(.5,.5,.5);
             animation: move_one 14s linear infinite ;
        }
        #wrap2{

            margin: 100px auto;
            transform-style: preserve-3d;
            transform: rotateX(-5deg) rotateY(0deg) scale3d(.5,.5,.5);
             animation: move_two 14s linear infinite ;
        }
        #wrap2>img{
            position: absolute;
            width: 100%;
            height: 100%;
             border: 3px solid black;
             border-bottom: 15px solid rgba(0,0,0,0);
             box-shadow: 5px 5px 10px black;
            -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
        }
        #wrap>img{
            position: absolute;
            width: 100%;
            height: 100%;
             border: 3px solid black;
             border-bottom: 15px solid rgba(0,0,0,0);
             box-shadow: 5px 5px 10px black;
            -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
        }
        @keyframes move_one {
            0%{
                transform: rotateX(-20deg) rotateY(0deg) scale3d(.5,.5,.5);
            }
            100%{
                transform: rotateX(-20deg) rotateY(-360deg) scale3d(.5,.5,.5);
            }
        }
        @keyframes move_two {
            0%{
                transform: rotateX(-5deg) rotateY(0deg) scale3d(.5,.5,.5);
            }
            100%{
                transform: rotateX(-5deg) rotateY(360deg) scale3d(.5,.5,.5);
            }
        }
    </style>
</head>
<body>
    <div id="wrap">
        <img src="img/1.jpg" name="pic">
        <img src="img/2.jpg" name="pic">
        <img src="img/3.jpg" name="pic">
        <img src="img/4.jpg" name="pic">
        <img src="img/5.jpg" name="pic">
        <img src="img/6.jpg" name="pic">
        <img src="img/7.jpg" name="pic">
        <img src="img/8.jpg" name="pic">
        <img src="img/9.jpg" name="pic">
        <img src="img/10.jpg" name="pic">
        <img src="img/11.jpg" name="pic">
        <img src="img/12.jpg" name="pic">
    </div>
    <div id="wrap2">

        <img src="img/13.jpg" name="pic">
        <img src="img/14.jpg" name="pic">
        <img src="img/15.jpg" name="pic">
        <img src="img/16.jpg" name="pic">
        <img src="img/17.jpg" name="pic">
        <img src="img/18.jpg" name="pic">
        <img src="img/19.jpg" name="pic">
        <img src="img/20.jpg" name="pic">
        <img src="img/21.jpg" name="pic">
        <img src="img/22.jpg" name="pic">
		<img src="img/23.jpg" name="pic">
		<img src="img/24.jpg" name="pic">
    </div>
     <audio id='audio' src="./img/music.mp3" loop>
    </audio>
</body>
<script>
    var oImg=document.getElementsByName('pic');
    for(var i=0;i<12; i++)
    {
        oImg[12+i].style.transform = 'rotateY('+ 30 * i +'deg)translateZ(350px)'
       oImg[i].style.transform = 'rotateY('+ 30 * i +'deg)translateZ(350px)'
    }
     const body = document.body;
    body.onclick = () => {
        const audio = document.getElementById('audio');
        audio.play()
    }
</script>
</html>